<template>
   <div>

    

      <div class="title">Reply | {{ReplyDiscussInfo.replycount}}条回复</div>
      <div class="box" 
         v-loading="this.loading"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
         <!-- 回复信息 -->
         <div v-for="item in ReplyData" :key="item.id" class="ReplyOne flex">
            <img :src="item.headphoto" class="headphoto">
            <!-- 详情 -->
            <div class="detail flex">
               <!-- 基本信息 -->
               <div class="flex info">
                  <button class="name">{{item.username}}</button>
                  <button class="tag-red" v-if="item.uid == ArticleDetail?.createdUid">作者</button>
                  <button v-if="item.replyeduid && item.replyedusername && item.replyeduid != item.uid" class="replyedname flex">
                     <font-awesome-icon icon="play" class="icon"/>{{item.replyedusername}}</button>
                  <div class="time">{{item.createdTime | time}}</div>    
               </div>
               <!-- 回复内容 -->
               <div class="flex" id="content" v-html="item.content"> </div>  

               <!-- 功能 -->
               <div class="fun flex">
                  <button v-for="fun in getFunData(item)" :key="fun.id"
                        :class="getClass(fun.class)"                       
                        @click="SelectFun(fun,item)">
                        <font-awesome-icon :icon="fun.icon" class="icon"/>
                     <div>{{fun.label}}</div>
                  </button>
               </div>   

            </div>

         </div>
     </div>
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
              loading:false,
              timer:null,

              funData:[  //type 1 别人的评论 2 自己的评论  4:公共的
                {id:1,label:'举报',type:1,icon:'circle-info',class:'tag-warning',time:0},
                {id:2,label:'删除',type:2,icon:'trash-can',class:'tag-danger',time:0,click:this.beforeDelete},
                {id:4,label:'回复',type:4,icon:'comments',class:'tag-success',time:0,click:this.reply_},
            ]
        }
     },
     computed:{
        ...mapState('Discuss',['ReplyDiscussInfo','ReplyData']),
        ...mapState('ArticleDetail',['ArticleDetail']),
        ...mapState('Login',['User']),
     },

     methods:{
        ...mapActions('Discuss',['deleteReply']),
        ...mapMutations('Discuss',['DISCUSSON']),
        TimeKeeping(fun){ //计时
           clearTimeout(this.timer)
           this.timer = setTimeout(() => {
               fun.time = 0
               clearTimeout(this.timer)
             },3000);
        },
        getFunData(item){
           let type = this.User?.uid == item.uid ? 1:2
           return  this.funData.filter(item => item.type != type)
        },
        getClass(funClass){
           return 'flex '+funClass
        },
        //回复
        reply_(item){
             let data ={discussid:item.discussid}
             data.type=3
             data.discussTitle='回复 ' +  item.username
             data.replyedusername = item.username
             data.replyeduid = item.uid
             this.DISCUSSON(data)
        },
         //删除之前
         beforeDelete(item) {
            this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
            }).then(() => {
                  this.handleDelete(item)
            })
        },
         //输出信息
         MessageShow(res){
              if(res.code == 200) return this.$message.success(res.message)
              if(res.code == -1) return this.$public.toLogin()
              this.$message.error(res.message)
         },
        async handleDelete(item){
          this.loading=true
          let res = await this.deleteReply(item)
           this.loading =false
          if(res.code == 200){
             this.ArticleDetail.extra.discusscount -= 1
             this.ReplyDiscussInfo.replycount -= 1
          }
          this.MessageShow(res)
        },
        async SelectFun(fun,item){
          fun.time +=1
          this.TimeKeeping(fun)
          if(fun.time >= 4) return this.$message.warning('不要频繁操作')
          if(! fun.click)return this.$message.warning('功能暂未实现')
          fun.click(item)              
        }
     }
  }
</script>
<style scoped lang='less'>

.title{
   width: 100%;
   font-size: 20px;
   color: #4D4D4D;  
   letter-spacing: 0;
   transition-duration: 0.5s;
   margin-bottom: 20px;
}
.box{
    width: 100%;
}
.ReplyOne{
    width: 95%;
    flex-wrap: nowrap;

    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
}
.detail{
    width: 100%;
    justify-content: flex-start;

    .info{
        width: 100%;
        justify-content: flex-start;
        .name,.replyedname{
            font-size: 20px;
            
            margin: 0 5px;
            letter-spacing: 0;
          
        }
        .icon{
          margin-right: 10px;
          font-size: 18px;
        }
        .time{
            font-size: 14px;
            letter-spacing: 0;
            color: var(--TimeColor);
        }
        
        button{
            margin-right: 5px;
            padding: 2px 4px;
            border-radius: 5px;
       }
    }
    #content{
        margin: 5px;
        border-radius: 5px;
        overflow: hidden;
          word-wrap:break-word; 
        word-break: break-all;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background: var(--BackColor);
    }
}
.fun{
    width: 100%;
    justify-content: flex-end;
    margin-top: 10px;

   button{
      border-radius: 5px;
      padding: 10px;
      margin-left: 5px;
      font-weight: 600;
   }
   .icon{
      margin-right: 5px;
   }
}
</style>